<app-inner-header name="Verto" [loadCounter]="loadCounter"></app-inner-header>
<app-module-not-exists-banner [list]="list"></app-module-not-exists-banner>
 <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [(selectedIndex)]="selectedIndex"
               *ngIf="list && list.exists !== false">
  <mat-tab label="List">
    <mat-card>
      <mat-card-header>
        <mat-card-subtitle>Settings</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>
              Settings
            </mat-panel-title>
            <mat-panel-description>
              Click to get details
            </mat-panel-description>
          </mat-expansion-panel-header>
          <h3>Params:</h3>
          <app-key-value-pad-2 [exist]="list.settings"
                               [items]="list.settings"
                               [newItems]="list.settings?.new"
                               [id]="null"
                               [toCopy]="null"
                               [dispatchersCallbacks]="globalSettingsDispatchers"
          >
          </app-key-value-pad-2>
        </mat-expansion-panel>
      </mat-card-content>
    </mat-card>

    <mat-card>
      <mat-card-header>
        <mat-card-subtitle>Profiles</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <div *ngFor="let item of onlyValues(list.profiles); trackBy: trackByFn" class="panel-wrapper">
          <mat-expansion-panel (opened)="getVertoProfilesParams(item.id)"
                               [expanded]="panelCloser['profile' + item.id]">
            <mat-expansion-panel-header>
              <mat-panel-title>
                {{item.name}}
              </mat-panel-title>
              <mat-panel-description>
                Click to get details
              </mat-panel-description>
            </mat-expansion-panel-header>
              <button mat-raised-button color="basic" (click)="copyProfile(item.id)"
                      *ngIf="list.profiles[item.id] && (list.profiles[item.id].parameters)">Copy
              </button>
              <h3>Params:</h3>
              <app-key-value-pad-position [exist]="item.parameters"
                                   [items]="item.parameters"
                                   [newItems]="item.parameters?.new"
                                   [id]="item.id"
                                   [toCopy]="toCopyProfile"
                                   [dispatchersCallbacks]="profileParamsDispatchers"
                                   [fieldsMask]="profileParamsMask"
              >
              </app-key-value-pad-position>

          </mat-expansion-panel>
        </div>
      </mat-card-content>
    </mat-card>
  </mat-tab>

  <mat-tab label="Add">
    <form class="spacer spacerb" (ngSubmit)="onProfileSubmit()">
      <mat-form-field hideRequiredMarker>
        <mat-label>Name</mat-label>
        <input matInput placeholder="New profile name" required name="name" [(ngModel)]="newProfileName">
      </mat-form-field>
      <button mat-raised-button color="primary" type="submit">Submit</button>
    </form>
  </mat-tab>

  <mat-tab label="Delete/Rename">
    <form class="spacer spacerb" #deleteForm="ngForm">
        <h3>Profiles:</h3>
        <div *ngFor="let profile of onlyValues(list.profiles); trackBy: trackByFn">
        <mat-form-field hideRequiredMarker>
        <mat-label>Profile name</mat-label>
        <input matInput name="Profile name" required [ngModel]="profile.name"
                 [name]="'profile::' + profile.id">
        </mat-form-field>
        <button mat-button color="accent" [disabled]="checkDirty(deleteForm.controls['profile::' + profile.id])"
                (click)="openBottomSheetProfile(profile.id, deleteForm.controls['profile::' + profile.id].value, list.profiles[profile.id].name, 'rename')">
          Update
        </button>
        <button mat-raised-button color="warn"
                (click)="openBottomSheetProfile(profile.id, deleteForm.controls['profile::' + profile.id].value, list.profiles[profile.id].name, 'delete')">
          Delete
        </button>
        </div>
    </form>
  </mat-tab>
</mat-tab-group>
